﻿@functions {
    // Foundation 4 uses a 12 column grid. This method calculates the number of columns available based on which zones are present. Implementing as a razor function because we can, could otherwise be a Func<string[], string, string> in the code block following.
    string CalcuClassify(string[] zoneNames, string classNamePrefix, int defaultColumnsPerZone, bool isSelfIncludedInSet)
    {
        var zoneCounter = 0;
        foreach (var name in zoneNames)
        {
            if (Model[name] != null)
                zoneCounter++;
        }

        int availableColumns = 12;

        if (!isSelfIncludedInSet)
            availableColumns = 12 - (defaultColumnsPerZone * zoneCounter);

        if (isSelfIncludedInSet && zoneCounter > 0)
            availableColumns = 12 / zoneCounter;

        return classNamePrefix + Convert.ToString(availableColumns);
    }
}
@{
    /* Global includes for the theme
    ***************************************************************/

    SetMeta("X-UA-Compatible", "IE=edge,chrome=1");
    
   // Style.Include("foundation.css").AtHead();
   // Style.Include("webicons.css").AtHead();
   // Style.Include("Simple.css").AtHead();
    Script.Include("jquery.js").AtHead();
    Script.Include("modernizr.js").AtHead();
    Script.Include("foundation.min.js").AtHead();
    Script.Include("foundation.joyride.js");
   
    
        /* Some useful shortcuts or settings
    ***************************************************************/

    Func<dynamic, dynamic> Zone = x => Display(x); // Zone as an alias for Display to help make it obvious when we're displaying zones

    /* Layout classification based on filled zones
    ***************************************************************/

    var mainColumnClass = CalcuClassify(new[] { "AsideFirst", "AsideSecond" }, "large-", 3, false); // for large-10, large-8 or large-12 if any of the aside zones are filled

    var tripelClass = CalcuClassify(new[] { "TripelFirst", "TripelSecond", "TripelThird" }, "large-", 4, true); // for large-4, large-6, etc. if any of the tripel zones are filled

    var footerQuadClass = CalcuClassify(new[] { "FooterQuadFirst", "FooterQuadSecond", "FooterQuadThird", "FooterQuadFourth" }, "large-", 3, true); // for small-3, small-4, etc. if any of the quad zones are filled

    /* Inserting some ad hoc shapes
    ***************************************************************/

    WorkContext.Layout.Header.Add(New.Branding(), "5"); // Site name and link to the home page
     //WorkContext.Layout.Footer.Add(New.BadgeOfHonor(), "5"); // Powered by Orchard
    //WorkContext.Layout.Footer.Add(New.User(), "10"); // Login and dashboard links
}

@if (Model.Header != null)
{
    <header>
       <nav class="top-bar" data-topbar style="margin-bottom: 20px;">
            <ul class="title-area">
                <li class="name">
                    @Zone(Model.Header)
                </li>
   <li class="toggle-topbar menu-icon"><a href="#"></a></li>
            </ul>
            @if (Model.Navigation != null)
            {
                <section class="top-bar-section">
                    @Zone(Model.Navigation)
                </section>
            }
        </nav>
    </header>
}

@if (Model.Featured != null)
{
    <div>
        <section class="row" id="featured">
            <div class="large-12 columns">
                @Zone(Model.Featured)
            </div>
        </section>
    </div>
}
@if (Model.BeforeMain != null)
{
    <div>
        <section class="row" id="before-main">
            <div class="large-12 columns">
                @Zone(Model.BeforeMain)
            </div>
        </section>
    </div>
}
<br />
<div id="layout-main-container" class="row">
    @if (Model.AsideFirst != null)
    {
        <aside id="aside-first" class="large-2 columns">
            @Zone(Model.AsideFirst)
        </aside>
    }
    <div id="layout-content" class="@mainColumnClass columns">
        @if (Model.Messages != null)
        {
            <section id="messages" class="row">
                <div class="large-12 columns">
                    @Zone(Model.Messages)
                </div>
            </section>
        }
        @if (Model.BeforeContent != null)
        {
            <section id="before-content" class="row">
                <div class="large-12 columns">
                    @Zone(Model.BeforeContent)
                </div>
            </section>
        }
@* the model content for the page is in the Content zone @ the default position (nothing, zero, zilch) *@
        @if (Model.Content != null)
        {
            <section id="content" class="row">
                <div class="large-12 columns">
                    @Zone(Model.Content)
                </div>
            </section>
        }
        @if (Model.AfterContent != null)
        {
            <section id="after-content" class="row">
                <div class="large-12 columns">
                    @Zone(Model.AfterContent)
                </div>
            </section>
        }
    </div>
    @if (Model.AsideSecond != null)
    {
        <aside id="aside-second" class="large-3 columns">
            @Zone(Model.AsideSecond)
        </aside>
    }
</div>

@if (Model.AfterMain != null)
{
    <div>
        <section class="row" id="after-main">
            <div class="large-12 columns">
                @Zone(Model.AfterMain)
            </div>
        </section>
    </div>
}

@if (Model.TripelFirst != null || Model.TripelSecond != null || Model.TripelThird != null)
{
    <div id="triple-section">
        <div class="row">
            @if (Model.TripelFirst != null)
            {
                <div class="@tripelClass columns">
                    @Zone(Model.TripelFirst)
                </div>
            }
            @if (Model.TripelSecond != null)
            {
                <div class="@tripelClass columns">
                    @Zone(Model.TripelSecond)
                </div>
            }
            @if (Model.TripelThird != null)
            {
                <div class="@tripelClass columns">
                    @Zone(Model.TripelThird)
                </div>
            }
        </div>
    </div>
}

<div id="footer-container">
    <footer class="row">
        <div class="large-12 columns">
            <div class="row">
                @if (Model.FooterQuadFirst != null)
                {
                    <div class="@footerQuadClass columns">
                        @Zone(Model.FooterQuadFirst)
                    </div>
                }
                @if (Model.FooterQuadSecond != null)
                {
                    <div class="@footerQuadClass columns">
                        @Zone(Model.FooterQuadSecond)
                    </div>
                }
                @if (Model.FooterQuadThird != null)
                {
                    <div class="@footerQuadClass columns">
                        @Zone(Model.FooterQuadThird)
                    </div>
                }
                @if (Model.FooterQuadFourth != null)
                {
                    <div class="@footerQuadClass columns">
                        @Zone(Model.FooterQuadFourth)
                    </div>
                }
            </div>
            @if (Model.Footer != null)
            {
                <div class="row">
                    <div class="large-12 columns">
                        @Zone(Model.Footer)
                    </div>
                </div>
            }
        </div>
    </footer>
</div>
    <script>
      $(document).foundation();
      $(document).foundation('joyride', 'start');
    </script>



